import React, { useEffect, useState } from "react";
import http from "../../api/http";
import { useNavigate, useParams } from "react-router-dom";
import {
  NavBar,
  Space,
  Toast,
  SearchBar,
  Card,
  IndexBar,
  List,
  Tag,
} from "antd-mobile";
import { LocationO } from "@react-vant/icons";
import { useDispatch } from "react-redux";
import { EditCityClick } from "../../store/CitySlice";
import { useSelector } from "react-redux";
function Index() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { type } = useParams();
  // console.log(type)
  const { start, end } = useSelector((state) => state.CitySlice);
  const [cityList, setCityList] = useState([]);
  const [hotlist, setHotList] = useState([]);
  const [searchlist, setSearchList] = useState([]);
  const [hisList, setHisList] = useState(
    JSON.parse(localStorage.getItem("hisList")) || []
  );
  const getCityList = async () => {
    const res = await http.get("/api/city");
    const { code, data } = res.data;
    console.log(data);
    if (code === 200) {
      setCityList(data.city);
      setHotList(data.hotCities);
    }
  };
  useEffect(() => {
    getCityList();
  }, []);

  const handleToClick = (city) => {
    dispatch(EditCityClick({ city, type }));
    navigate("/");
  };
  const handleSearch = async (val) => {
    if (val !== "") {
      const res2 = await http.get("/api/city/search", { params: { wd: val } });
      const { code, data } = res2.data;
      // console.log(data, "search");
      if (code === 200) {
        setSearchList(data);
      }
      //历史
      const newHisList = [val, ...hisList];
      const ind = newHisList.lastIndexOf(val);
      if (ind > 0) {
        newHisList.splice(ind, 1);
      }
      setHisList(newHisList);
      localStorage.setItem("hisList", JSON.stringify(newHisList));

    } else {
      setSearchList([]);
    }
  };
  return (
    <div>
      <NavBar onBack={() => navigate("/")}>城市列表</NavBar>
      <SearchBar placeholder="请输入内容" onChange={handleSearch} />
      <Card title="最近搜素">
        <List>
          {hisList.map((item, index) => (
            <Tag
              key={index}
              style={{ margin: 30 }}
              color="#2db7f5"
              onClick={() => handleToClick(item)}
            >
              {item}
            </Tag>
          ))}
        </List>
      </Card>
      <List>
        {searchlist.map((item, index) => (
          <List.Item key={index} onClick={() => handleToClick(item.name)}>
            {item.name}
          </List.Item>
        ))}
      </List>
      <Card title="当前城市">
        <Tag onClick={() => navigate("/")}>
          <LocationO />
          {start}
        </Tag>
      </Card>
      <Card title="热门城市">
        <List>
          {hotlist?.map((item, index) => (
            <Tag
              key={index}
              style={{ margin: 30 }}
              color="#2db7f5"
              onClick={() => handleToClick(item.name)}
            >
              {item.name}
            </Tag>
          ))}
        </List>
      </Card>
      <Card title="城市列表">
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {cityList?.map((group) => {
              const { initial, list } = group;
              return (
                <IndexBar.Panel
                  index={initial}
                  title={`${initial}`}
                  key={`${initial}`}
                >
                  <List>
                    {list.map((item, index) => (
                      <List.Item
                        key={index}
                        onClick={() => handleToClick(item.name)}
                      >
                        {item.name}
                      </List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  );
}

export default Index;
